<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户管理</title>
<link rel="stylesheet" href="../js/layui/css/layui.css">
<script type="text/javascript" src="../js/jquery-3.2.1.js" ></script>
<script type="text/javascript" src="../js/layui/layui.js" ></script>
<style type="text/css">
html,body {
	width: 100%;
	height: 100%;
}
.layui-table, .layui-table-view {
	margin: 0;
}
.layui-btn {
	background-color: white;
	color: black;
	width: 80px;
	border: 1px solid #eee;
	border-radius: 7px;
}
.layui-btn:hover {
    opacity: unset;
	color: white;
	background: linear-gradient(90deg,#28f5ff,#5382FC);
}
.layui-form-item .layui-input-inline {
	width: 320px;
}
.layui-layer-page .layui-layer-content {
	overflow: visible !important;
}
.layui-layer-page .layui-layer-btn {
	padding-top: 0px !important;
}
.input-search {
	width: calc(100% - 50px);height: 30px;
	position: absolute;top: 10px;left: 5px;
    border: 1px solid #dbdbdb;
    padding-left: 10px;
}
.layui-menu .layui-menu-item-checked:after {
	border-right: 3px solid #007BFD;
}
.layui-menu .layui-menu-item-checked, .layui-menu .layui-menu-item-checked2 {
	color: #007BFD;
}
.layui-panel .layui-icon-search {
	font-size: 26px; color: #52B3EA;
	position: relative;top: 12px;left: calc(100% - 30px);
	cursor: pointer;
}
.layui-menu {
    top: 20px;
}
.layui-form-onswitch {
	border-color: #007BFD;
    background-color: #007BFD;
}
.main_left {
	width: 19%;height: 100%;
	overflow-y: auto;overflow-x: hidden;
	position: absolute;border-right: 1px solid #ddd;
}
</style>
</head>
<body>
	<!-- 左侧导航 -->
   	<div class="layui-panel main_left">
		<input id="userSearch" class="input-search" placeholder="用户搜索">
		<i class="layui-icon layui-icon-search" onclick="getUserList()"></i>
        <ul class="layui-menu" id="userList"></ul>
	</div>
    <!-- 右侧内容 -->
    <div class="main_right" style="width: 80%;height: 100%;overflow: hidden;position: absolute;right: 0px;">
		<div class="layui-btn-container" style="padding: 10px 0px 0px 20px;background-color: #fff;height: 40px;">
			<button class="layui-btn layui-btn-sm" id="save">保存</button>
		</div>
		<div style="width: 100%;height: calc(100% - 50px);">
			<table class="layui-table" id="rootTable" lay-filter="rootTable"></table>
		</div>
    </div>
</body>
<script type="text/javascript">
var pageuser = null;
var userId = null;
$(document).ready(function() {
	showLoginInfo();
	$.ajax({
		url: "../g/service/Sample/getUserId",
		type:'POST',
		cache:false,
		async:false,
		dataType: "json",
		contentType:"application/json",
	    success:function(data){
	    	if(data != 0 && data != 1) {
				window.parent.location.href="../../index.html";
	    	}
	    	userId = data;
	    	getUserList();
	    	createTable();
	    }
	});
	layui.use(['table','dropdown'], function(){
		var dropdown = layui.dropdown,table = layui.table;
		
		dropdown.on('click(userList)', function(options){
			pageuser = options.id;
		    table.reload("rootTable", {
			    url: '../g/service/Sample/getModelTable',
			    method: "post",
			    where: {userId:pageuser}
		    });
		});
	});
});
//展示登陆用户信息
function showLoginInfo(){
	$.ajax({
		url: '../pv/login/loginInfo',
		type: "get",
		success:function(res){
			result = res;
			if (result != "") {
				$("#login_name").text(result);
			}else {
				$("#login").text("登录/注册");
				window.parent.location.href="login.html";
			}
		}
	})
}
function createTable() {
	layui.use(['table','layer','form'], function(){
		var table = layui.table,layer = layui.layer,form = layui.form;
		var inittable = table.render({
		    elem: '#rootTable',
		    height: "full-60",
		    url: '../g/service/Sample/getModelTable',
		    where: {userId:pageuser},
		    method: "post",
		    contentType: 'application/json',
		    cols: [[ //表头
		        {field: 'modelId', title: '功能编号', width:'15%', align: 'center'},
		        {field: 'modelName', title: '功能名称', edit: 'text', width:'30%', align: 'center'},
		      	{field: 'title', title: '所属大类', width:'25%', align: 'center'},
		      	{field: 'ifOnClick', title: '启用状态', templet: '#switchIfOnClick', width:'30%', align: 'center'}
		    ]]
		});
		form.on('switch(ifonclick)', function(obj){
			var ifonclick = obj.elem.checked?1:0;
			var index  = obj.othis.parents('tr').attr("data-index");
			table.cache["rootTable"][index].ifOnClick = ifonclick;
	  	});
		table.on('edit(rootTable)', function(obj){
			var selector = obj.tr.find('[data-field=' + obj.field + '] div');
            var oldtext = $(selector).text();
		    var value = obj.value, //得到修改后的值
		    data = obj.data, //得到所在行所有键值
		    field = obj.field; //得到字段
		    if(field == "modelName") {
		    	if(value.length == 0 || value.length > 16) {
		    		if(value.length == 0)layer.msg("功能名称不能为空");
		    		if(value.length > 16)layer.msg("功能名称不能超过16位");
                    obj.tr.find('td[data-field=modelName] input').val(oldtext);
                	obj.update({ "modelName":oldtext });
		    	}
		    }
	  	});

		$("#save").click(function() {
			var allData = table.cache["rootTable"];
			$.ajax({
				url: "../g/service/Sample/saveModelTableData",
				type:'POST',
				cache:false,
				async:false,
				dataType: "json",
				data: JSON.stringify({"tableData":allData, "userId":pageuser}),
				contentType:"application/json",
			    success:function(data){
			    	if(data.data > 0){
			    		layer.msg("保存成功");
			    		inittable.reload();
			    	} else {
			    		if(data.msg){
				    		layer.msg(data.msg)
			    		} else {
				    		layer.msg("保存失败")
			    		}
			    	}
			    }
			});
		});
	});
}

function getUserList() {
	$.ajax({
		url: "../g/service/Sample/getUserList",
		type:'POST',
		cache:false,
		async:false,
		dataType: "json",
		data: JSON.stringify({username:$("#userSearch").val()}),
		contentType:"application/json",
	    success:function(data){
	    	var content = '';
			$.each(data.data,function(i,n){
				if(userId == n.id){
					pageuser = n.id;
					content += "<li lay-options='{id:" + n.id + "}' class='layui-menu-item-checked'>"+ n.name+"</li>";
				} else {
					content += "<li lay-options='{id:" + n.id + "}'>"+ n.name+"</li>";
				}
			});
			$("#userList").html(content);
	    }
	});
}
</script>
<script type="text/html" id="switchIfOnClick">
  	<input type="checkbox" name="ifonclick" value="{{d.modelId}}" lay-skin="switch" lay-text="启用|关闭" lay-filter="ifonclick" {{ d.ifOnClick == 1 ? 'checked' : '' }}>
</script>
</html>